<template>
  <div>
    <li class="list head">
      <span class="ckxqhead w-[25%] text-center">项目名称</span>
      <span class="ckxqhead w-[50%] title text-center">项目描述</span>
      <span class="ckxqhead w-[25%] text-center">操作</span>
    </li>
    <ul class="item">
      <vue3-seamless-scroll
        :list="tableData"
        class="warp"
        :hover="true"
        :step="1"
      >
        <li v-for="(item, index) in tableData" :key="index" class="list">
          <span
            class="date text-center line-clamp-1 text-[14px]"
            v-text="item.name"
          ></span>
          <span
            class="title line-clamp-2 text-center text-[14px]"
            v-text="item.date"
          ></span>
          <span class="ckxq text-center line-clamp-2 text-[14px]"
            >查看详情</span
          >
        </li>
      </vue3-seamless-scroll>
    </ul>
  </div>
</template>
<script setup>
import { ref } from "vue";
const tableData = ref([
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名项目名项目名项目名项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
  {
    date: "项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述",
    name: "项目名",
  },
]);
</script>
<style scoped lang="scss">
.title {
  color: #fff;
  width: 50%;
  max-width: 50%;
}
.date {
  color: #fff;
  width: 25%;
}
.ckxq {
  color: #0290f7;
  width: 25%;
  cursor: pointer;
}
.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin: 10px 0;
}
.ckxqhead {
  color: #72ceff;
}

.list:nth-of-type(even) {
  background-color: rgba($color: #048cf1, $alpha: 0.2);
}
.head {
  background-image: url("@/assets/images/Group 401488@2x.png");
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  line-height: 40px;
}
.warp {
  width: 100%;
  height: 820px;
  overflow: hidden;
  position: relative;
}
</style>
